Component({

  externalClasses: ['tabs-height', 'tabs-item-class', 'tabs-item-selected-class', 'icon-item-class', 'tabs_blank'],

  properties: {
    data: {
      type: Array
    },

    keyName: {
      type: String,
    },

    iconSrc: {
      type: String
    },

    selectedIconSrc: {
      type: String
    }
  },

  data: {
    scrollTop: 0,
    tabsItem: 0
  },

  ready() {
    let _this = this;

    _this.$getNode('#tabs-box', res => {
      let box_res = res[0].height || 0;

      _this.$getNode('#tabs-item', res => {
        _this.setData({
          scrollHeight: box_res,
          tabsItemHeight: res[0].height || 0
        });
      });
    });   
  },

  methods: {

    /*tab项*/
    _tabsItem(e) {
      let _this = this,
        td = _this.data,
        params = e.currentTarget.dataset.params,
        base_num = parseInt((td.scrollHeight / 2) / td.tabsItemHeight),
        index = e.currentTarget.dataset.index + 1;

      if (index >= base_num) {
        _this.setData({
          scrollTop: td.tabsItemHeight * (index - base_num)
        });
      }

      _this.setData({
        tabsItem: index - 1
      });

      this.triggerEvent("tab", { params, index: index -1 }, { });
    },

    /*获取元素*/
    $getNode(name, callback) {
      const query = wx.createSelectorQuery().in(this);
      query.select(name).boundingClientRect();

      query.exec(queryRes => {
        return callback(queryRes)
      });
    }
  },
});